<template>
  <!-- 评价内容 -->
  <div class="evaluate-content">
    <div class="evaluate-content-item" v-for="item in evaluateList.slice(0,10)" :key="item.id">
      <div class="evaluate-content-title">
        <p class="line3">{{item.content}}</p>
      </div>
      <div class="evaluate-uasername">
        <!-- 未来可能会有图片 -->
        <p class="line1" :title="item.nickName">{{item.nickName}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
   props:{
    evaluateList:{
      type:Array,
      default:() =>{
        return []
      }
    }
  },
  data () {
    return {

    }
  },
  mounted() {
  },
  methods: {
  },
  computed: {
  },
  watch:{
  },
  beforeDestory() {
  }
}
</script>

<style scoped>
  /* 评价内容· */
.evaluate-content{
  overflow: hidden;
}
.evaluate-content-item{
  display:flex;
  padding:50px 90px 50px 30px;
  margin:20px 0;
  border-radius:4px;
  background-color: #21232e;
  font-size: 14px;
  color:#dcdcdd;
  line-height: 1.1;
  border:2px solid #383a43;
  box-sizing:border-box;
  justify-content: space-between;
}
.evaluate-content-title p{
  text-align: justify;
  flex-grow:5;
  box-sizing:border-box;
}
.evaluate-uasername {margin-left:75px}
.evaluate-uasername p{
  flex-grow:2;
  white-space: nowrap;
  box-sizing:border-box;
}
</style>
